<template>
  <el-row :gutter="10">
    <el-col :span="12">
      <el-card>
        <el-descriptions
          title="任务详情"
          :labelStyle="labelStyle"
          :column="2"
          border
        >
          <el-descriptions-item label="乡镇" :span="2">{{
                                                     town.orgName
                                                     }}
          </el-descriptions-item>
          <el-descriptions-item label="计划开始时间">{{
                                               exData.startTime
                                               }}
          </el-descriptions-item>
          <el-descriptions-item label="计划结束时间">{{
                                               exData.endTime
                                               }}
          </el-descriptions-item>
          <el-descriptions-item label="改造牵头人">{{
                                              exData.lerderUserName
                                              }}
          </el-descriptions-item>
          <el-descriptions-item label="联系方式">{{
                                             exData.lerderUserMobile
                                             }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">{{
                                           town.status | keyText("BARRIER_FREE_STATUS")
                                           }}
          </el-descriptions-item>
          <el-descriptions-item label="可下发数量">{{town.taskCount }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="opt">
          <el-button
            v-if="town.status == 'NOT_REPORT'"
            type="primary"
            @click="report(town.id)"
          >
            汇总结果上报
          </el-button>
          <el-button
            v-if="town.status == 'RETURN'"
            type="primary"
            @click="report(town.id)"
          >
            重新上报
          </el-button>
          <el-button
            v-if="town.status == 'NOT_REPORT'"
            type="success"
            @click="issue(town.id)"
          >
            任务下发社区
          </el-button>
          <el-button @click="$parent.who = 'villagesTable'">
            返回
          </el-button>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <el-descriptions title="社区汇总结果"></el-descriptions>
        <div v-if="records.length !== 0">
          <template v-for="item in records">
            <div :key="item.id" style="margin-bottom:20px">
              <el-descriptions :labelStyle="labelStyle" :column="2" border>
                <el-descriptions-item
                  label="社区"
                  :contentStyle="{ width: '150px' }"
                >
                  {{ item.orgName }}
                </el-descriptions-item>
                <el-descriptions-item label="汇总人数">
                  {{ item.count }}
                </el-descriptions-item>
                <el-descriptions-item label="汇总状态">
                  {{ item.status | keyText("BARRIER_FREE_STATUS") }}
                </el-descriptions-item>
                <el-descriptions-item label="下发数量">
                  {{ item.taskCount }}
                </el-descriptions-item>
              </el-descriptions>
              <div class="desAfter">
                <span @click="view(item)">
                  查看详情
                </span>
                <span
                  v-if="item.status==='REPORT'"
                  style="color:#F56C6C"
                  @click="reject(item.id)"
                >
                  驳回
                </span>
              </div>
            </div>
          </template>
          <div style="text-align:center">
            <el-pagination
              style="display:inline"
              background
              layout="total, prev, pager, next"
              :page-size="3"
              :total="total"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无数据"></el-empty>
        </div>
      </el-card>
    </el-col>
    <el-dialog
      title="选择下发社区"
      :visible.sync="dialogVisible"
      width="35%"
      top="30vh"
      :close-on-click-modal="false"
      @close="close"
    >
      <div
        v-for="(item, index) in orgIdList"
        :key="index"
        class="town"
      >
        <el-row :gutter="15">
          <el-col :span="15">
            <el-select v-model="item.orgId" placeholder="请选择社区" style="width: 100%">
              <el-option
                v-for="item in options"
                :key="item.origId"
                :label="item.name"
                :value="item.origId"
              />
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-input-number
              v-model="item.taskCount"
              :min="1"
              :max="10"
              label="数量"
              style="width: 100%"
            />
          </el-col>
        </el-row>
        <el-tooltip content="新增社区" placement="top" v-if="index===0">
          <el-button
            type="success"
            icon="el-icon-plus"
            circle
            class="town__btn"
            size="small"
            @click="addOrDelTownship()"
          />
        </el-tooltip>
        <el-tooltip content="删除社区" placement="top" v-else>
          <el-button
            type="danger"
            icon="el-icon-minus"
            circle
            class="town__btn"
            size="small"
            @click="addOrDelTownship(index)"
          />
        </el-tooltip>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">确认下发</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>
<script>
export default {
  name: "villagesDetail",
  props: {
    obj: [Object, Boolean]
  },
  activated() {
    if (this.obj) {
      this.remouldId = this.obj.remouldId || this.obj.id;
      this.exData = this.obj;
      this.getTown();
    }
  },
  data() {
    return {
      exData: this.obj,
      labelStyle: {
        width: "120px",
        textAlign: "center"
      },
      town: {},
      records: [],
      orgIdList: [{ orgId: null, taskCount: 1 }],
      options: [],
      dialogVisible: false,
      total: 1,
      pageIndex: 1
    };
  },
  methods: {
    close() {
      this.orgIdList = [{ orgId: null, taskCount: 1 }]
    },
    // 新增或删除乡镇
    addOrDelTownship(index) {
      if (index) this.orgIdList.splice(index, 1)
      else this.orgIdList.push({ orgId: null, taskCount: 1 })
    },
    // 获取乡镇信息
    getTown() {
      this.API.getRemouldTown({ remouldId: this.exData.id }).then(res => {
        this.town = res.data;
        this.getPageData();
      });
    },
    // 获取分页数据
    getPageData() {
      let query = {
        remouldId: this.exData.id,
        townId: this.town.id,
        pageIndex: this.pageIndex,
        pageSize: 3
      };
      // 获取社区汇总信息
      this.API.getRemouldVillageList(query).then(ret => {
        this.records = ret.data.records;
        this.total = ret.data.total;
      });
    },
    // 上报
    report(id) {
      this.$confirm("确认上报汇总结果?", "提示", {
        type: "success"
      }).then(() => {
        this.API.townReport({ townId: id }).then(res => {
          this.success("上报成功");
          this.getTown();
        });
      });
    },
    // 详情
    view(item) {
      this.$parent.show("villagesDetail_1", item);
    },
    // 驳回
    reject(id) {
      this.$confirm("确认驳回社区申请?", "提示", {
        type: "warning"
      }).then(() => {
        this.API.townReject({ villageId: id }).then(res => {
          this.success("驳回成功!");
          this.getPageData();
        });
      });
    },
    // 下发
    issue(id) {
      this.dialogVisible = true;
      // 获取当前任务的乡镇信息
      this.issueData = {
        remouldId: this.exData.id,
        townId: id
      };
      // 查询社区信息
      let query = {
        parentId: this.town.orgId,
        type: 0,
        queryType: "ALL",
        flag: true
      };
      this.API.getOrganizeLazy(query).then(ret => {
        this.options = ret.data;
      });
    },
    // 下发社区保存
    save() {
      if (this.orgIdList.some(org => !org.orgId)) return this.warning("请选择乡镇")

      // 当前选中数量
      let taskTotal =
        this.orgIdList.length > 1 ?
          this.orgIdList.reduce((v, i) => v.taskCount + i.taskCount)
          : this.orgIdList[0].taskCount
      // 列表选中的数量
      let issuedTaskTotal =
        this.records.length ?
          this.records.reduce((v, i) => v.taskCount + i.taskCount) : 0

      if ((taskTotal + issuedTaskTotal) > this.town.taskCount) {
        return this.warning("下发社区数量不得超出当前分配数量");
      }
      this.$confirm("确认下发社区?", "提示", {
        type: "warning"
      }).then(() => {
        this.issueData.body = this.orgIdList;
        this.API.taskNext(this.issueData).then(res => {
          this.success("下发成功");
          this.dialogVisible = false;
          this.getPageData();
          this.close()
        });
      });
    },
    // 分页回调
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getPageData();
    }
  }
};
</script>
<style scoped lang="scss">
  .opt {
    margin: 20px;
    display: flex;
    justify-content: center;
  }

  .desAfter {
    border: 1px solid #ebeef5;
    border-top: none;
    padding: 12px 10px;
    font-size: 14px;
    color: #409eff;
    text-align: center;
  }

  .desAfter span {
    margin: 0 5px;
    cursor: pointer;
  }

  .town {
    width: 100%;
    display: flex;
    align-items: center;

    &:not(&:nth-child(1)) {
      margin-top: 10px;
    }
  }
</style>
